<template>
    <div class="volunteerActivity">
        <mTitle :title="title" :marginTop="marginTop"></mTitle>
        <router-link :to="'/volunteerRelease/'+this.$route.params.id" tag="div" class="arts-activity-message-btn" v-show="this.leaderid === 1">发布活动</router-link>
        <scroll class="arts-activity-container" :data="activityList">
            <div>
                <ul class="activity-item">
                    <router-link :to="'/volunteerText/'+item.id" tag="li" class="activity-list" v-for="(item, index) in activityList" :key="index">
                        <div class="left">
                            <img class="img" v-lazy="item.coverimg" alt="" />
                        </div>
                        <div class="middle">
                            <div class="activity-list-title">{{item.title}}</div>
                            <div class="start-wrapper">
                                <div class="start-text">
                                    <i class="icon"></i>
                                    <span class="text">开始时间</span>
                                </div>
                                <div class="start-time">
                                    <span class="start-date">{{item.startdate}}</span>
                                    <span class="start-hour">{{item.starttime}}</span>
                                </div>
                                <div class="end-text">
                                    <i class="icon"></i>
                                    <span class="text">结束时间</span>
                                </div>
                                <div class="end-time">
                                    <span class="end-date">{{item.enddate}}</span>
                                    <span class="end-hour">{{item.endtime}}</span>
                                </div>
                            </div>
                        </div>
                    </router-link>
                </ul>
            </div>
            <!-- 请求数据loading -->
            <!-- <div class="loading-wrapper" v-show="!activityList.length">
                <loading></loading>
            </div> -->
            <div class="no-activity" v-show="activityList === null">
                <span class="text">暂无任何活动</span>
            </div>
        </scroll>
        <div class="volunteer-detail-fixed">
            <router-link :to="'/volunteerDetail/' + id" replace tag="div" class="arts-detail-item">
                <i class="icon icon-item1"></i>
                <span class="text">团队介绍</span>
            </router-link>
            <router-link :to="'/volunteerActivity/' + id" replace tag="div" class="arts-detail-item active">
                <i class="icon icon-item2"></i>
                <span class="text">近期活动</span>
            </router-link>
            <router-link :to="'/volunteerMessage/' + id" replace tag="div" class="arts-detail-item">
                <i class="icon icon-item3"></i>
                <span class="text">留言</span>
            </router-link>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
    import axios from 'axios'
    import mTitle from 'base/title/title'
    import Scroll from 'base/scroll/scroll'
    import Loading from 'base/loading/loading'

    export default {
        data () {
            return {
                title: "近期活动",
                marginTop: true,
                activityList: [],
                id: '',
                leaderid: 0
            }
        },
        methods: {
            getActivityInfo () {
                // 数据提交
                axios.post('/api/index.php?g=Api&m=Ucenter&a=teamactivity', {
                    openid: localStorage.getItem("openid"),
                    mid: localStorage.getItem("memberid"),
                    teamid: this.$route.params.id
                }).then((res) => {
                    if (res.data.rescode=='0000') {
                        this.activityList = res.data.data
                        console.log(this.activityList)
                    }
                }).catch(function (error) {

                })
            },
            getLeaderId () {
                // 数据提交
                axios.post('/api/index.php?g=Api&m=Ucenter&a=isteamleader', {
                    openid: localStorage.getItem("openid"),
                    mid: localStorage.getItem("memberid"),
                    teamid: this.$route.params.id
                }).then((res) => {
                    if (res.data.rescode=='0000') {
                        this.leaderid = res.data.data.isleader
                    }
                }).catch(function (error) {

                })
            }
        },
        components: {mTitle,Scroll,Loading},
        created () {
            this.id = this.$route.params.id
            this.getActivityInfo()
            this.getLeaderId()
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~common/stylus/mixins.styl'
    
    .volunteerActivity
        width: 100%
        height: 100%
        position: relative
        padding-top: 6px
        box-sizing: border-box
        .arts-activity-message-btn
            position: absolute
            width: 96px
            height: 24px
            background: #f8624a
            color: #fff
            border-radius: 20px
            top: 9px
            text-align: center
            right: 15px
            line-height: 24px
        .arts-activity-container
            position: absolute
            top: 44px
            bottom: 44px
            width: 100%
            padding: 0 15px
            box-sizing: border-box
            overflow: hidden
            .no-activity
                position: absolute
                width: 100%
                top: 50%
                -webkit-transform: translateY(-50%)
                transform: translateY(-50%)
                z-index: 9
                text-align: center
                left: 0
                right: 0s
                .text
                    font-size: 22px
                    color: #0094d4
            .loading-wrapper
                position: absolute
                width: 100%
                top: 50%
                -webkit-transform: translateY(-50%)
                transform: translateY(-50%)
                z-index: 9
            .activity-item
                width: 100%
                .activity-list
                    width: 100%
                    height: 120px
                    border-bottom: 1px solid #eee
                    box-sizing: border-box
                    display: flex
                    align-items: center
                    overflow: hidden
                    position: relative
                    &:last-child
                        border-bottom: 0
                    .left
                        flex: 0 0 100px
                        width: 100px
                        margin-right: 10px
                        .img
                            width: 100px
                    .middle
                        flex: 1
                        ellipsis()
                        .activity-list-title
                            width: 100%
                            font-size: 14px
                            ellipsis()
                        .start-wrapper
                            margin-top: 6px
                            .start-text,.end-text
                                font-size: 0
                                .icon
                                    background: url('./icon1.png') no-repeat
                                    width: 9px
                                    height: 9px
                                    background-size: 100% 100%
                                    display: inline-block
                                .text
                                    font-size: 14px
                                    color: #0094d4
                                    display: inline-block
                                    margin-left: 6px
                            .start-time,.end-time
                                font-size: 0
                                margin-top: 4px
                                .start-date,.end-date
                                    font-size: 14px
                                    color: #d40000
                                .start-hour,.end-hour
                                    font-size: 14px
                                    color: #d40000
                                    margin-left: 10px
                            .end-text
                                margin-top: 4px
                                .icon
                                    background: url('./icon2.png') no-repeat
                                    background-size: 100% 100%
                                .text
                                    color: #888
                            .end-time
                                .end-date,.end-hour
                                    color: #888
                    .right
                        position: absolute
                        right: 0
                        top: 43px
                        .arts-activity-btn
                            width: 66px
                            height: 24px
                            background: #0094d4
                            border-radius: 20px
                            color: #fff
                            display: block
                            text-align: center
                            line-height: 24px
                            font-size: 14px
        .volunteer-detail-fixed
            position: absolute
            height: 44px
            bottom: 0
            left: 0
            width: 100%
            align-items: center
            border-top: 1px solid rgba(7,17,27,.3)
            background: #fff
            display: flex
            .arts-detail-item
                flex: 1
                text-align: center
                &.active
                    .icon-item1
                        background: url('./icon8-active.png') no-repeat
                        background-size: 100% 100%
                    .text
                        color: #0094D3
                    .icon-item2
                        background: url('./icon9-active.png') no-repeat !important
                        background-size: 100% 100% !important
                    .icon-item3
                        background: url('./icon10-active.png') no-repeat
                        background-size: 100% 100%
                .icon
                    margin: 0 auto
                    display: block
                    &.icon-item1
                        background: url('./icon8.png') no-repeat
                        width: 20px
                        height: 21px
                        background-size: 100% 100%
                    &.icon-item2
                        background: url('./icon9.png') no-repeat
                        width: 20px
                        height: 20px
                        background-size: 100% 100%
                    &.icon-item3
                        background: url('./icon10.png') no-repeat
                        width: 20px
                        height: 20px
                        background-size: 100% 100%
                .text
                    color: #a1a1a1
                    font-size: 12px
                    margin-top: 4px
</style>